import { useState } from "react";
import { useQueryClient } from "@tanstack/react-query";

import Todos from "./Todos";
import EditTodo from "./EditTodo";
import AddTodo from "./AddTodo";

export default function TodoPanel() {
  const queryClient = useQueryClient();
  const [editingIndex, setEditingIndex] = useState(null);
  // const [views, setViews] = useState(["", "fruit", "grape"]);
  const [views, setViews] = useState([""]);

  return (
    <>
      <div>
        <button onClick={() => queryClient.invalidateQueries()}>
          Force Refetch All
        </button>
      </div>
      <br />
      <hr />
      {views.map((view, index) => (
        <div key={index}>
          <Todos
            initialFilter={view}
            setEditingIndex={setEditingIndex}
            onRemove={() => {
              setViews((old) => [...old, ""]);
            }}
          />
          <br />
        </div>
      ))}
      {/* <button
        onClick={() => {
          setViews((old) => [...old, ""]);
        }}
      >
        Add Filter List
      </button> */}
      <hr />
      {editingIndex !== null ? (
        <>
          <EditTodo
            editingIndex={editingIndex}
            setEditingIndex={setEditingIndex}
          />
          <hr />
        </>
      ) : null}
      <AddTodo />
    </>
  );
}
